<template>
  <view>
    <video 
      id="customVideo"
      :src="videoSrc"
      :style="{width: '100%', height: videoHeight}"
      @timeupdate="onTimeUpdate"
    ></video>
    
    <view class="controls">
      <button @click="togglePlay">{{ isPlaying ? '暂停' : '播放' }}</button>
      <slider 
        :value="currentTime"
        :max="duration"
        @change="onSliderChange"
        block-size="15"
      />
      <text>{{ formatTime(currentTime) }} / {{ formatTime(duration) }}</text>
    </view>
  </view>
</template>

<script lang="ts">
import { ref, onMounted } from 'vue'

export default {
  setup() {
    const videoSrc = ref('https://video19.ifeng.com/video09/2024/05/23/p7199260608686989961-0-122707.mp4')
    const videoHeight = ref('400rpx')
    const isPlaying = ref(false)
    const currentTime = ref(0)
    const duration = ref(0)
    const videoContext = ref<any>(null)
    
    onMounted(() => {
      videoContext.value = uni.createVideoContext('customVideo')
    })
    
    const togglePlay = () => {
      if (isPlaying.value) {
        videoContext.value?.pause()
      } else {
        videoContext.value?.play()
      }
      isPlaying.value = !isPlaying.value
    }
    
    const onTimeUpdate = (e: any) => {
      currentTime.value = e.detail.currentTime
      duration.value = e.detail.duration
    }
    
    const onSliderChange = (e: any) => {
      videoContext.value?.seek(e.detail.value)
    }
    
    const formatTime = (seconds: number): string => {
      const mins = Math.floor(seconds / 60)
      const secs = Math.floor(seconds % 60)
      return `${mins}:${secs < 10 ? '0' : ''}${secs}`
    }
    
    return {
      videoSrc,
      videoHeight,
      isPlaying,
      currentTime,
      duration,
      togglePlay,
      onTimeUpdate,
      onSliderChange,
      formatTime
    }
  }
}
</script>

<style>
.controls {
  padding: 20rpx;
  background-color: #f5f5f5;
}
</style>